const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin');
//const MiniCssExtractPlugin = require("mini-css-extract-plugin");


let config = {
    entry: __dirname + "/src/main.js", //已多次提及的唯一入口文件
    output: {
        path: __dirname + "/dist", //打包后的文件存放的地方
        filename: "[name].bundle.js", //打包后输出文件的文件名
        chunkFilename:'[name].bundle.js'
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./",//本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        inline: true, //实时刷新
        hot: true
    },
    watchOptions: {
        ignored: /node_modules/,
        aggregateTimeout: 300,  //300ms内重复保存不打包
        poll: 1000  //每秒询问的文件变更的次数
    },
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/, //扩展名
                use: {
                    loader: "babel-loader", //引入babel
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/ //例外
            },
            {
                test: /\.css$/,
                loader: ExtractTextWebapckPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                }),
                exclude: /node_modules/,
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextWebapckPlugin.extract({
                            fallback: 'vue-style-loader',
                            use: 'css-loader'
                        })
                    }
                }
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new ExtractTextWebapckPlugin({
            filename:'[name].css'
        }),
        /*
        new MiniCssExtractPlugin({
            filename: 'style.css',
          })
        */
    ]
}

module.exports = config;